<template>
	<view class="page">
		<!-- 好友头像 -->
		<view class="avatar-container">
			<image class="avatar" :src="`http://localhost:8080${friend.avatar}`" />
		</view>

		<!-- 好友名字 -->
		<view class="name">
			<text>{{ friend.nickName }}</text>
		</view>

		<!-- 好友简介 -->
		<view class="intro">
			<text>{{ friend.intro }}</text>
		</view>

		<!-- 好友的社交按钮 -->
		<view class="buttons">
			<!-- 发送消息按钮始终可点击 -->
			<button class="message-btn" @click="sendMessage">发送消息</button>

			<!-- 根据状态显示不同的“加为好友”按钮内容，并禁用按钮 -->
			<button class="add-friend-btn" @click="addFriend">
				{{ friend.status === 0 ? '关注' : (friend.status === 1 ? '已关注' : '互相关注') }}
			</button>
		</view>

		<!-- 好友的详细信息 -->
		<view class="details">
			<view class="info">
				<text>性别：{{ friend.sex === 0 ? '男' : '女' }}</text>
			</view>

			<view class="info">
				<text>邮箱：{{ friend.email }}</text>
			</view>
			<view class="info">
				<text>联系方式：{{ friend.phonenumber }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		updateFollowStatus,
		isFollow
	} from '@/api/my/crony.js';

	export default {
		data() {
			return {
				// 假设这是好友的数据
				friend: {
					avatar: '/images/avatar.jpg',
					nickName: '张三',
					intro: '喜欢编程和旅行',
					sex: 0, // 0 男, 1 女
					email: 'zhangsan@example.com',
					status: 0, // 0 未关注, 1 已关注, 2 互相关注
					followedId: 123 // 假设这是好友的 ID
				},
				userId: this.$store.state.user.userId,
				friendId: ''

			};
		},
		onLoad(options) {
			// 解析传递的 URL 参数
			if (options.item) {
				this.friend = JSON.parse(decodeURIComponent(options.item));
				this.friendId = this.friend.followedId
				console.log(this.friend);
			}
			
		},
		mounted() {
			this.followStatus()
		},
		methods: {
			// 发送消息
			sendMessage() {
				uni.navigateTo({
					url: `/pages/message/chat?name=${this.friend.nickName}&avatar=${this.friend.avatar}&userId=${this.friend.followedId}`
				});
			},
			// 判断两个用户之间的相互关系
			followStatus() {
				isFollow(this.userId, this.friendId)
					.then((res) => {
						// 判断返回的状态
						if (res.code === 200) {
							const {
								followStatus,
								userStatus
							} = res.data;

							// 如果 followStatus 和 userStatus 都是 1，表示互相关注
							if (followStatus === 1 && userStatus === 1) {
								this.friend.status = 2; // 互相关注
							} else if (userStatus === 1) {
								this.friend.status = 1; // 已关注
							} else {
								this.friend.status = 0; // 未关注
							}
						}
					})
					.catch((error) => {
						console.log(error);
					});
			},


			addFriend() {
				// 根据当前的状态发送请求并更新状态
				let newStatus = 0; // 默认设置为未关注

				if (this.friend.status === 0) {
					// 未关注状态，点击后设置为已关注
					newStatus = 1;
				} else if (this.friend.status === 1) {
					// 已关注状态，点击后设置为互相关注
					newStatus = 2;
				} else if (this.friend.status === 2) {
					// 互相关注状态，点击后设置为未关注
					newStatus = 0;
				}

				// 立即更新状态为“互相关注”或其他，并调用后端API更新
				this.friend.status = newStatus;

				// 调用后端API更新好友关系
				this.updateFriendStatus(newStatus).then(() => {
					// 成功后重新判断当前状态
					this.followStatus(); // 重新判断互相关注的状态
				});
			},

			// 调用后端 API 更新好友状态
			updateFriendStatus(newStatus) {
				return new Promise((resolve, reject) => {
					const status = newStatus; // 新的关注状态

					updateFollowStatus(this.userId, this.friendId, status)
						.then((res) => {
							// 这里可以根据后端返回确认状态
							uni.showToast({
								title: newStatus === 0 ? '已取消关注' : (newStatus === 1 ? '已关注' : '互相关注'),
								icon: 'none'
							});
							resolve(); // 确保状态更新完成后再调用 followStatus
						})
						.catch((error) => {
							console.log(error);
							// 后端返回错误时显示错误提示
							uni.showToast({
								title: '操作失败，请稍后再试',
								icon: 'none'
							});
							reject(error); // 返回错误信息
						});
				});
			}



		},
		created() {
			// 在页面加载时判断当前的互相关注状态
			this.followStatus();
		}
	};
</script>

<style scoped>
	.page {
		padding: 20px;
		background-color: #f7f7f7;
	}

	.avatar-container {
		display: flex;
		justify-content: center;
		margin-bottom: 20px;
	}

	.avatar {
		width: 120px;
		height: 120px;
		border-radius: 50%;
		border: 4px solid #007AFF;
	}

	.name {
		text-align: center;
		font-size: 26px;
		font-weight: bold;
		margin-bottom: 10px;
		color: #333;
	}

	.intro {
		text-align: center;
		color: #666;
		font-size: 16px;
		margin-bottom: 20px;
	}

	.buttons {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30px;
	}

	.buttons button {
		width: 45%;
		padding: 12px;
		border-radius: 6px;
		font-size: 16px;
		cursor: pointer;
	}

	.message-btn {
		background-color: #007AFF;
		color: white;
		border: none;
	}

	.add-friend-btn {
		background-color: #34C759;
		color: white;
		border: none;
	}

	.details {
		background-color: #fff;
		padding: 20px;
		border-radius: 8px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	}

	.details .info {
		margin-bottom: 15px;
		font-size: 16px;
		color: #333;
	}

	.disabled-btn {
		background-color: #d3d3d3 !important;
		color: #a0a0a0 !important;
		border: 1px solid #ccc !important;
		cursor: not-allowed;
	}

	button[disabled] {
		cursor: not-allowed;
		/* 禁用时光标样式 */
	}
</style>